;(function(){

    class Details{
        constructor(){
            this.index = 0;
            // 默认处理
            this.goodsid=location.search.split("=")[1];
            if( this.goodsid !="a00001" && this.goodsid !="a00022"){
                this.goodsid="a00001";
             }else{
                this.goodsid=this.goodsid;
             }
        }
        getData(){
            var that =this;
            pAjax({
                type:"get",
                url:"http://localhost/XMYP/src/php/details.php",
                data:{
                    details:this.goodsid,
                }
            }).then(function(res){
                that.goodsData = JSON.parse(res);
                that.addGoodsData();
            });

            pAjax({
                type:"get",
                url:"http://localhost/XMYP/src/php/details.php",
                data:{
                    detailimg:this.goodsid,
                }
            }).then(function(res){
                that.goodsImg = JSON.parse(res);
                that.addGoodsImg(); 
            })
        }
        addGoodsData(){

            $(".topbox_r_title").text(this.goodsData[0].title);
            $(".topbox_r_intro").text(this.goodsData[0].introduce);
            $(".topbox_r_prices_t").children().eq(2).text(this.goodsData[0].price);
            var str = this.goodsData[0].service.split(",");
            $(".topbox_r_pricesb_b").children().eq(3).children().eq(1).text(str[3]);
            var str1 = this.goodsData[0].color.split(",");
            $(".topbox_r_colorbox").children().eq(0).text(str1[0]).end().eq(1).text(str1[1]).end().eq(2).text(str1[2]);
            var str2 = this.goodsData[0].edition.split(",");
            $(".topbox_r_editionbox").children().eq(0).text(str2[0]).end().eq(1).text(str2[1]);
        }
        addGoodsImg(){
            this.bigimg = [];
            var smaimg = [];
            var detailimg = [];
            // 默认处理，大图
            $(".topbox_l_bigimg").children("img").attr("src",`${this.goodsImg[0].bigimg}`)
            for(var i = 0 ; i < this.goodsImg.length ; i++){
                if(this.goodsImg[i].smaimg){
                    smaimg.push(this.goodsImg[i].smaimg);
                }
                if(this.goodsImg[i].bigimg){
                    this.bigimg.push(this.goodsImg[i].bigimg);
                }
                if(this.goodsImg[i].detailimg){
                    detailimg.push(this.goodsImg[i].detailimg);
                }
            }
            for(var i = 0 ; i < $(".topbox_l_smaimg img").length ; i++){
                $(".topbox_l_smaimg img").eq(i).attr("src",this.goodsImg[i].smaimg);
            }
            for(var i = 0 ; i < $(".btmbox_l_main img").length ; i++){
                $(".btmbox_l_main img").eq(i).attr("src",this.goodsImg[i].detailimg);
            }

            this.addEvent();
            // for(var i = 0 ; i < $(".topbox_l_smaimg img").length ; i++){
            //     $(".topbox_l_smaimg img").eq(i).attr("src",this.goodsImg[i].smaimg);
            // }
            
        }
        
        addEvent(){
            var that = this;
            $("#imgBtnTop").on("click",function(){
                // 向上运动
                that.move(1);
            })
            $("#imgBtnBtm").on("click",function(){
                 // 向下运动
                that.move(0);
            })
            $(".topbox_l_smaimg").on("click","img",function(e){
                that.go(this,$(".topbox_l_smaimg img").index(this));  
            })
        }
        move(i){
            if(i==0){
                this.index += 1;
                if(this.index >= $(".topbox_l_smaimg img").length-1){
                    this.index = $(".topbox_l_smaimg img").length-1;
                }
                $(".topbox_l_bigimg").children("img").attr("src",this.bigimg[this.index]);
                for(var k = 2 ; k <= $(".topbox_l_smaimg div").length-2;k++){
                    $(".topbox_l_smaimg div").eq(k).css({
                        "border":"1px solid #f4f4f4"
                    });
                }
                $(".topbox_l_smaimg div").eq(this.index+2).css({
                    "border":"1px solid #333"
                });
            }else if(i==1){
                this.index -= 1;
                if(this.index <= 0){
                    this.index = 0;
                }
                $(".topbox_l_bigimg").children("img").attr("src",this.bigimg[this.index]);
                for(var k = 2 ; k <= $(".topbox_l_smaimg div").length-2;k++){
                    $(".topbox_l_smaimg div").eq(k).css({
                        "border":"1px solid #f4f4f4"
                    });
                }
                $(".topbox_l_smaimg div").eq(this.index+2).css({
                    "border":"1px solid #333"
                });
            }
        }
        go(ele,index){
            for(var k = 2 ; k <= $(".topbox_l_smaimg div").length-2;k++){
                $(".topbox_l_smaimg div").eq(k).css({
                    "border":"1px solid #f4f4f4"
                });
            }
            $(ele).parent().css({
                "border":"1px solid #333"
            });

            $(".topbox_l_bigimg img").attr("src",this.bigimg[index]);
            this.index = index;
        }
    }

    var details = new Details();
    details.getData();

    // 放大镜

    class Magnifier{
        constructor(){
            // 放大镜蒙层父级
            this.magnifierLayerBox = $(".topbox_l_bigimg");
            // 放大镜蒙层
            this.magnifierLayer = $(".magnifierLayer");
            // 放大镜蒙层之蒙层
            this.magnifierLayer1 = $(".magnifierLayer1");
            // 放大镜
            this.magnifier = $("#magnifier");
        }
        addEvent(){
            this.magnifierLayerBox.hover(()=>{
                this.magnifierLayer.css("display","block");
                this.magnifier.css("display","block");

            },()=>{
                this.magnifierLayer.css("display","none");
                this.magnifier.css("display","none");
            });

            this.magnifierLayer1.on('mousemove',(e)=>{
                // e.offsetX
                // e.offsetY
                // this.magnifierLayer.width()/2
                // this.magnifierLayer.height()/2
                // 蒙层的移动
                var x = e.offsetX-this.magnifierLayer.height()/2;
                var y = e.offsetY-this.magnifierLayer.width()/2;
                if(x>=this.magnifierLayerBox.width()-this.magnifierLayer.width()){
                    x = this.magnifierLayerBox.width()-this.magnifierLayer.width();
                }else if(x<=0){
                    x = 0 ;
                };
                if(y>=this.magnifierLayerBox.height()-this.magnifierLayer.height()){
                    y=this.magnifierLayerBox.height()-this.magnifierLayer.height();
                }else if(y<=0){
                    y = 0 ;
                };
                this.magnifierLayer.css({
                    top: y,
                    left: x,
                });
                //放大镜的移动
                var bx = x*(this.magnifierLayerBox.width()/this.magnifierLayer.width());
                var by = y*(this.magnifierLayerBox.height()/this.magnifierLayer.height());
                this.magnifier.css("background-position",`${-bx}px ${-by}px`);            
            });

        }

    }
    var magnifier = new Magnifier();
    magnifier.addEvent();

}());